<template>
  <div class="home">
    <el-card>
      <h2 class="changyuong" style="border-left:6px solid #409eff;padding:0 0 0 10px">常用功能</h2>
      <ul class="often-features">
        <li>
          <el-button
            type="primary"
            size="small"
            @click="hostbtn('/src/components/online/audit')"
          >审核列表</el-button>
        </li>
        <li>
          <el-button
            type="primary"
            size="small"
            @click="hostbtn('/src/components/online/appointment')"
          >预约列表</el-button>
        </li>
        <li>
          <el-button type="primary" size="small" @click="hostbtn('/offline')">线下预约管理</el-button>
        </li>
        <li>
          <el-button
            type="primary"
            size="small"
            @click="hostbtn('/src/components/certificate/batchList')"
          >证书批次列表</el-button>
        </li>
        <li>
          <el-button
            type="primary"
            @click="hostbtn('/src/components/certificate/certificateList')"
          >证书列表</el-button>
        </li>
      </ul>
    </el-card>
    <!-- 图表展示 -->
    <section class="charts">
      <ul>
        <li class="charts-title">
          <el-row>
            <el-col :span="7" :offset="8" class="charts-title-main">{{year}}年{{province}}登记表</el-col>
            <el-col :span="6" :offset="3" class="charts-title-button">
              <span style="line-height:35px;min-width:80px;text-align:right">切换省份 ></span>
              <el-select
                size="small"
                v-model="province"
                class="elSelect"
                placeholder="请选择省份"
                @change="changeProvince"
              >
                <el-option
                  v-for="(item,index) in proviceOption"
                  :label="item"
                  :value="item"
                  :key="index"
                ></el-option>
              </el-select>
            </el-col>
          </el-row>
        </li>
        <li class="canvas-container">
          <v-chart class="canvas-chart" :options="chartOptions"></v-chart>
          <div v-if="isEmpty" class="emty-data">无数据</div>
        </li>
      </ul>
    </section>
  </div>
</template>
<script>
import Chart from "vue-echarts";
import "echarts/lib/component/legend";
import "echarts/lib/component/title";
import "echarts/lib/component/tooltip";
import "echarts/lib/chart/pie";
import City from "@/assets/js/city";
var oldarr = [
  ["1月", "", ""],
  ["2月", "", ""],
  ["3月", "", ""],
  ["4月", "", ""],
  ["5月", "", ""],
  ["6月", "", ""],
  ["7月", "", ""],
  ["8月", "", ""],
  ["9月", "", ""],
  ["10月", "", ""],
  ["11月", "", ""],
  ["12月", "", ""],
];
export default {
  components: {
    "v-chart": Chart,
  },
  data() {
    return {
      // menuKey: 1,
      arrState: "",
      chartOptions: {
        legend: {
          x: "right",
          y: "bottom",
        },
        tooltip: {},
        title: [
          {
            text: "",
            left: "5%",
            top: "0",
          },
          {
            subtext: "办理数量",
            left: "7%",
            top: "5%",
            textAlign: "center",
          },
          {
            subtext: "月份",
            left: "91%",
            top: "83%",
            textAlign: "center",
          },
        ],
        dataset: {
          source: [["type", "新申请", "后续"], ...oldarr],
        },
        xAxis: {
          type: "category",
        },
        yAxis: {},

        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{ type: "bar" }, { type: "bar" }],
        axisTick: {
          width: 4,
          show: false,
        },
      },

      proviceOption: [], // 省份列表
      year: String(new Date().getFullYear()), // 年份
      province: "四川省", // 城市
      isEmpty: false, // 无数据框
    };
  },
  watch: {
    arrState(value) {
      //console.log("变化了")
      //console.log(value)
    },
  },
  computed: {
    bgdate() {
      return `${this.year}-01-01`;
    },
    eddate() {
      return `${this.year}-12-31`;
    },
  },
  methods: {
    // 获取图标信息
    requerstData() {
      var arr = JSON.parse(JSON.stringify(oldarr));
      this.isEmpty = false;
      this.$http
        .get("/trademark/report/province", {
          params: {
            type: 1, // 省内报表0 省外报表1
            province: this.province, // 省份
            bgdate: this.bgdate, // 年头
            eddate: this.eddate, // 年尾
            pageSize: 1, // 页尺寸
            pageNum: 1, // 页码
          },
        })
        .then(({ data: res }) => {
          if (res.code !== 200) return this.$message.error("获取数据信息失败");
          // 查询的数据不为空
          if (res.data.list[0] != null) {
            // ++this.menuKey;
            arr.forEach((arr, i) => {
              arr[1] = String(res.data.list[0]["month" + (i + 1) + 1]);
              arr[2] = String(res.data.list[0]["month" + (i + 1) + 2]);
            });
            this.chartOptions.dataset.source = [];
            this.chartOptions.dataset.source.push(
              ["type", "新申请", "后续"],
              ...arr
            );
          } else {
            this.chartOptions.dataset.source = [];
            this.chartOptions.dataset.source.push(
              ["type", "新申请", "后续"],
              ...oldarr
            );
            this.isEmpty = true;
          }
          // this.arrState =
          // arr = this.arr
        })
        .catch((error) => {});
    },
    // 常用功能按钮跳转
    hostbtn(route) {
      this.$router.push({
        path: route,
      });
    },
    // 获得省份
    getCity() {
      City.forEach((item) => {
        this.proviceOption.push(item.label);
      });
    },
    // 切换城市
    changeProvince() {
      this.requerstData();
    },
  },
  created() {
    this.getCity(); // 获取城市列表
    this.requerstData();
  },
};
</script>
<style lang="less" scoped>
.home {
  .canvas-container {
    position: relative;
    .canvas-chart {
      margin: 0 auto;
    }
    .emty-data {
      width: 50px;
      display: inline-block;
      position: absolute;
      left: 50%;
      top: 50%;
    }
  }

  .el-card {
    margin-top: -10px;
    border: none;
    box-shadow: none;
    border-radius: 0;
    border-bottom: 1px solid #dddddd;
    h2 {
      font-size: 22px;
      font-weight: bold;
      padding: 10px 0;
    }
    .often-features {
      overflow: hidden;
      padding: 20px 0;
      li {
        float: left;
        margin: 0 15px;
      }
    }
  }
  .charts {
    // background-color: #fff;
    // box-shadow: 5px 5px 10px 1px #ccc;
    // padding: 20px 0;
    ul {
      // display: flex;
      li {
        // flex: 1;
        .echarts {
          min-width: 80vw;
          height: 450px;
          margin-top: 30px;
        }
      }
      .charts-title {
        padding: 20px 0;
        .charts-title-main {
          font-size: 24px;
          color: #333;
          text-align: center;
        }
        .charts-title-button {
          padding-right: 20px;
          display: flex;
          justify-content: center;
          .elSelect {
            margin-left: 10px !important;
            max-width: 150px;
          }
        }
      }
    }
    .el-main {
      padding: 0 !important;
    }
  }
}
</style>
<style>
.dashboard-editor-container {
  padding: 0 !important;
}
</style>
